<template>
  <div class='container'>
    <el-card>
      <el-row type="flex">
        <el-col>
          关键字<el-input v-model="input" placeholder="根据编号搜索" size="small "
            style="width:200px;margin-left: 10px;"></el-input>
        </el-col>
        <el-col>
          <el-row type="flex" justify="end">
            <el-button size="small " @click="delFn">清除</el-button>
            <el-button type="primary" size="small " @click="searchFn">搜索</el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-alert :title="`数据一共${total}条`" show-icon style="margin:20px 0" :closable="false">
      </el-alert>
      <!-- 数据 -->
      <el-table :data="list" :header-cell-style="{background:'rgb(250,250,250)'}" >
        <el-table-column label="编号" prop="id" width="220px">
        </el-table-column>
        <el-table-column label="题型" prop="questionType" :formatter="formatter" width="80px">
        </el-table-column>
        <el-table-column label="题目编号" prop="questionIDs" width="220px">
          <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.questionIDs" :key="index" >
                <a href="javascript:;" style="color: rgb(0, 153, 255)" @click="preview(item.id)">{{ item.number }} </a>
              </div>
            </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="addTime" width="180px">
        </el-table-column>
        <el-table-column label="答题时间(s)" prop="totalSeconds" width="109px">
        </el-table-column>
        <el-table-column label="正确率(%)" prop="accuracyRate" width="109px">
        </el-table-column>
        <el-table-column label="录入人" prop="userName" width="109px">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="danger" plain :circle="true" @click="open(row)"><i class="el-icon-delete" ></i></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5,10,20,50]"
          :page-size="data.pagesize"
          background
          :total="total"
          layout=" prev, pager, next,sizes, jumper">
        </el-pagination>
      </el-row>
    </el-card>
    <questions-preview :dialogVisible="dialogVisible" @close="dialogVisible = false" :questionItem="questionItem"></questions-preview>
  </div>
</template>

<script>
import { randoms } from '@/api/hmmm/questions.js'
import * as constants from '@/api/hmmm/constants'
import * as questions from '@/api/hmmm/questions'
import questionsPreview from '../components/questions-preview'
export default {
  components: {
    questionsPreview
  },
  data () {
    return {
      currentPage4: 1,
      list: [],
      input: '',
      dialogVisible: false,
      questionItem: {},
      total: null,
      data: {
        page: 1,
        pagesize: 10

      }
    }
  },
  created () {
    this.randoms()
  },
  methods: {
    delFn () {
      this.input = ''
      this.randoms()
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.data.pagesize = val
      this.randoms()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.data.page = val
      this.randoms()
    },
    async randoms () {
      const res = await randoms(this.data)
      this.list = res.data.items
      this.total = res.data.counts
    },
    async open (item) {
      const res = await this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (res === 'confirm') {
        await questions.removeRandoms(item)
        this.$message.success('删除成功')
        this.randoms()
      }
    },
    formatter ({ questionType }) {
      return constants.questionType.find(item => item.value === Number(questionType)).label
    },
    async preview (id) {
      try {
        const { data } = await questions.detail({ id })
        this.questionItem = data
        this.dialogVisible = true
        console.log(data)
      } catch (error) {
        this.$message.info('数据未找到')
        return error
      }
    },
    async searchFn () {
      const res = await randoms({ ...this.data, keyword: this.input })
      this.list = res.data.items
      this.total = this.list.length
    }
  }
}
</script>

<style scoped>
.container {
  margin: 10px;
}
</style>
